import {reqDeleteUser, reqGetUsers, reqLogout} from '../../api'
import { getUser, removeToken, removeUser } from '../../utils/storageUtils'
import render from './index.art'
/* 
获取指定页码的用户列表显示
*/
async function getUsers(page) {
  // 每页5条数据
  const limit = 5
  // 请求获取指定页码的分页数据
  const result = await reqGetUsers(page, limit)
  const {users, total} = result.data
  // 计算出页码数
  const pageCount = Math.ceil(total/limit)

  // 得到登陆用户的用户名
  const {username} = getUser()

  // 渲染模板, 生成html
  const html = render({users, page, pageCount, total, username})
  // 插入页面中
  document.getElementById('app').innerHTML = html

  handleClickLogout()
  handleClickDelete(page)
}

// 添加到window上  ==> 让模板中可以直接调用
window.getUsers = getUsers

// 初始获取第一页显示
getUsers(1)

/* 
处理点击退出登陆
*/
function handleClickLogout() {
  document.getElementById('logout').onclick = async () => {
    // 请求退出接口
    await reqLogout()

    // 清除保存的token和user
    removeToken()
    removeUser()

    // 成功后, 跳转到登陆页面
    window.location = '/login.html'
  }
}

/* 
处理点击删除
*/
function handleClickDelete(page) {
  document.getElementsByName('deleteBtn').forEach(btn => {
    btn.onclick = async (e) => {
      // 得到标签上的data自定义属性
      const {id, username} = e.target.dataset
      // 显示确定框
      if (window.confirm(`确定删除 ${username} 吗?`)) {
        // 请求删除
        await reqDeleteUser(id)
        // 成功后, 重新获取列表显示
        getUsers(page)
      }
    }
  })
}

